<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select name="" id="sheng">
        <option value="北京">北京</option>
    </select>
    <select name="" id="shi"></select>
    <select name="" id="qu"></select>
    <script src="./js/axios.min.js"></script>
    <script>
        let sheng = document.querySelector('#sheng')
        let shi = document.querySelector('#shi')
        let qu = document.querySelector('#qu')
        // 设置 省 默认值
        axios({
            url:'http://hmajax.itheima.net/api/province'
        }).then(res => {
            console.log(res);
            sheng.innerHTML = 
                res.data.list.map(item => `<option value="${item}">${item}</option>`).join('')
        })
        // 设置 城市 默认值
        axios({
            url:'http://hmajax.itheima.net/api/city',
            params:{
                pname:'北京'
            }
        }).then(res => {
            console.log(res);
            shi.innerHTML = 
                res.data.list.map(item => `<option value="${item}">${item}</option>`).join('')
        })
        // 设置 区域 默认值
        axios({
            url:'http://hmajax.itheima.net/api/area',
            params:{
                pname:'北京',
                cname:'北京市'
            }
        }).then(res => {
            console.log(res);
            qu.innerHTML = 
                res.data.list.map(item => `<option value="${item}">${item}</option>`).join('')
        })
        // 点击且黄省份，城市跟着发生变化
        sheng.addEventListener('change',function(){
            axios({
            url:'http://hmajax.itheima.net/api/city',
            params:{
                pname:sheng.value
            }
        }).then(res => {
            shi.innerHTML = 
                res.data.list.map(item => `<option value="${item}">${item}</option>`).join('')
            // 当切换了省份，展示了城市后，区域先清空
            // qu.innerHTML = `<option>请选择区域</option>`
            axios({
            url:'http://hmajax.itheima.net/api/area',
            params:{
                pname:sheng.value,
                cname:shi.value
            }
            }).then(res => {
            qu.innerHTML = 
                res.data.list.map(item => `<option value="${item}">${item}</option>`).join('')
            })
        })
        })
        // 点击切换城市，区域跟着发生变化
        shi.addEventListener('change',function(){
            axios({
            url:'http://hmajax.itheima.net/api/area',
            params:{
                pname:sheng.value,
                cname:shi.value
            }
            }).then(res => {
            qu.innerHTML = 
                res.data.list.map(item => `<option value="${item}">${item}</option>`).join('')
            })
        })
    </script>
</body>
</html>